<html> 
 
<head> 
<title>001 | Lights | J3D</title> 


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>



<script>
	var engine, scene;
	var theta = 0;
	var redLightMax = 0.33;
	
	function init() {
		
		if(!checkWebGL()) return;

		// Create engine
		
		engine = new J3D.Engine();
		
		// Setup camera

		camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = -3;
		camera.rotation.y = Math.PI;
		engine.camera = camera;
		
		// Setup lights
		
		light0 = new J3D.Transform();
		light0.light = new J3D.Light(J3D.AMBIENT);
		light0.light.color = J3D.Color.black;
		
		light1 = new J3D.Transform();
		light1.light = new J3D.Light(J3D.SPHERICAL_HARMONICS);
		light1.light.color = new J3D.Color(0.33, 0.33, 0, 1);
		light1.light.intensity = 2.5;
		
		sun = new J3D.Transform();
		sun.light = new J3D.Light(J3D.HEMISPHERE);
		sun.light.color = new J3D.Color(redLightMax, 0, 0, 1);
		sun.position = new v3(10, 0, 0);
		
		light3 = new J3D.Transform();
		light3.light = new J3D.Light(J3D.POINT);
		light3.light.color = new J3D.Color(0, 0, 0.66, 1);
		
		// Get scene and setup ambient light color
		
		scene = engine.scene;
		scene.ambient = J3D.Color.black;
		
		// Add lights and camera
		
		scene.add(camera);
		
		scene.add(light0);
		scene.add(light1);
		scene.add(sun);
		scene.add(light3);
		
		buildScene();
		
		draw();
	}
	
	function buildScene(){
		
		// Setup materials
		
		moMat = J3D.BuiltinShaders.fetch("Gouraud");
		moMat.su.specularIntensity = 1;
		moMat.su.shininess = 32;
		moMat.su.color = new J3D.Color(0.9, 0.9, 0.9, 1);
		moMat.hasColorTexture = false;

		
		ctMat = J3D.BuiltinShaders.fetch("Phong");
		ctMat.su.color = J3D.Color.white;
		ctMat.su.specularIntensity = 10;
		ctMat.su.shininess = 32;
		ctMat.colorTexture = new J3D.Texture("models/textures/containerbake512.jpg");
		ctMat.hasColorTexture = true;
		
		crMat = J3D.BuiltinShaders.fetch("Phong");
		crMat.su.color = new J3D.Color(1,1,1,1);//J3D.Color.white;
		crMat.su.specularIntensity = 0.1;
		crMat.su.shininess = 0.1;
		crMat.colorTexture = new J3D.Texture("models/textures/crate256.jpg");
		crMat.hasColorTexture = true;
		
		haMat = J3D.BuiltinShaders.fetch("Gouraud");
		haMat.su.specularIntensity = 1;
		haMat.su.shininess = 32;
		haMat.su.color = new J3D.Color(1,1,1,1);
		haMat.colorTexture = new J3D.Texture("models/textures/metalbase.jpg");
		haMat.hasColorTexture = true;
		
		// Setup transforms and meshes

		ct = new J3D.Transform();
		ct.position.x = -1.5;
		J3D.Loader.loadJSON("models/container.js", function(j) { ct.geometry = new J3D.Mesh(j); } );
		ct.renderer = ctMat;
		
		mo = new J3D.Transform();
		J3D.Loader.loadJSON("models/monkeyhi.js", function(j) { mo.geometry = new J3D.Mesh(j); } );
		mo.scale = v3.ONE().mul(0.66);
		mo.renderer = moMat;

		cr = new J3D.Transform();
		cr.position.x = 1.5;
		cr.position.z = 0.5;
		J3D.Loader.loadJSON("models/crate.js", function(j) { cr.geometry = new J3D.Mesh(j); } );
		cr.renderer = crMat;
		
		ha = new J3D.Transform();
		ha.position = new v3(0.2499574, 0.4273163, -0.2176546);
		ha.rotation.y = 0;//Math.PI;
		J3D.Loader.loadJSON("models/handles.js", function(j) { ha.geometry = new J3D.Mesh(j); } );
		ha.renderer = haMat;
	
		// Add all to the scene
		scene.add(ct);
		scene.add(mo);
		scene.add(cr).add(ha);
	}
	
	function draw() {
		requestAnimationFrame(draw);
		
		light1.enabled = document.getElementById("yellow").checked;
		sun.enabled = document.getElementById("red").checked;
		light3.enabled = document.getElementById("blue").checked;
		
		if (document.getElementById("ambient").checked) {
			light0.light.color = new J3D.Color(0.1, 0.1, 0.1, 1);
		} else {
			light0.light.color = J3D.Color.black;
		}
		
		if (document.getElementById("anim").checked) {
			ct.rotation.x += J3D.Time.deltaTime / 7000;
			ct.rotation.y -= J3D.Time.deltaTime / 3000;
			
			cr.rotation.x -= J3D.Time.deltaTime / 7000;
			cr.rotation.z += J3D.Time.deltaTime / 3000;
			
			mo.rotation.y -= J3D.Time.deltaTime / 7000;
		}
		
		sun.light.color.r = redLightMax * (Math.sin(theta/3) + 1) / 2;
		light3.position.x = Math.cos(theta/6) * 3;
		light3.position.z = Math.sin(theta/6) * 3;
		
		theta += 0.1;
		
		engine.render();
	}
	
</script>

</head> 

<body onload="init();">
	<script>
		setLabels("001. Lights");
	</script>
	<div id="details">
		Toggle lights:<br> 
		<input type='checkbox' id='red' checked> Hemisphere<br>  
		<input type='checkbox' id='blue' checked> Point<br>
		<input type='checkbox' id='yellow' checked> Spherlical Harmonics<br> 
		<input type='checkbox' id='ambient' checked> Ambient<br> 
		<input type='checkbox' id='anim' checked> Rotate models  
	</div>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 